<template>
  <container-view>
    <div class="container-wrap">
      <div class="name">密码重置</div>
      <step-reset v-model="stepsValue" :list="stepsList"></step-reset>
      <div class="component-wrap">
        <reset-one v-show="stepsValue === 1" @event="handleEvent"></reset-one>
        <reset-two v-show="stepsValue === 2" :post-data="postData" @event="handleEvent"></reset-two>
        <reset-three v-show="stepsValue === 3" @event="handleEvent"></reset-three>
      </div>
    </div>
  </container-view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import StepReset from '@/components/steps/Reset.vue';

import ContainerView from './components/Container.vue';
import ResetOne from './components/ResetOne.vue';
import ResetThree from './components/ResetThree.vue';
import ResetTwo from './components/ResetTwo.vue';
import { stepsList } from './datas/reset';

const route = useRouter();

const stepsValue = ref(1);
const postData = ref<any>({});

const handleLogin = () => {
  route.replace('login');
};

const handleNext = (data: any) => {
  data && (postData.value = { ...postData.value, ...data });
  stepsValue.value += 1;
};

const handlePre = () => {
  stepsValue.value -= 1;
};

const handleEvent = (params: any) => {
  const { type, data } = params;

  switch (type) {
    case 'next':
      handleNext(data);
      break;
    case 'pre':
      handlePre();
      break;
    case 'login':
      handleLogin();
      break;
    default:
      break;
  }
};
</script>

<style lang="less" scoped>
.container-wrap {
  position: relative;

  .component-wrap {
    padding: 16px 22px;
  }

  :deep(.pwd-wrap) {
    width: 100%;
  }

  :deep(.btn-wrap) {
    width: 100%;
    display: flex;
    position: relative;

    .t-button--variant-outline {
      background: transparent;
    }

    .return-login {
      display: flex;
      align-items: center;
      gap: 2px;
      font-size: 12px;
      line-height: 18px;
      color: #f1d333;
      margin-top: 14px;
      position: absolute;
      left: 0;
      bottom: -24px;
      cursor: pointer;

      .text {
        text-decoration: underline;
      }
    }
  }
}
</style>
